<template>
  <div class="demo-input-size">
    <!-- Card阴影卡片 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span class="explain">说明：目前支持学科和关键字条件筛选</span>
        <el-button style="float: right" type="success" icon="el-icon-edit" @click="$router.push('new')"
          >新增试题</el-button
        >
      </div>
      <!-- input文档标签 -->
      <el-form
        :inline="true"
        :model="formInline"
        class="demo-form-inline"
        label-width="75px"
        size="small"
        label-position="right"
      >
        <el-form-item label="学科" >
          <el-select
            v-model="subjectID"
            placeholder="请选择"
            style="width: 335px"
          >
            <el-option
            v-for="(item,index) in simple"
            :key="index"
            :value="item.value"
            :label="item.label"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="二级目录">
          <el-select
            v-model="formInline.regionv"
            placeholder="请选择"
            style="width: 335px"
          >
            <el-option
            v-for="(item,index) in simpled"
            :key="index"
            :value="item.value"
            :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签">
          <el-select
            v-model="formInline.regionb"
            placeholder="请选择"
            style="width: 335px"
          >
            <el-option
            v-for="(item,index) in simples"
            :key="index"
            :value="item.value"
            :label="item.label"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="关键字">
          <el-input
            v-model="formInline.usern"
            placeholder="请选择"
            style="width: 335px"
          ></el-input>
        </el-form-item>
        <!-- 第二排 -->
        <el-form-item label="试题类型">
          <el-select
            v-model="formInline.regionx"
            placeholder="请选择"
            style="width: 335px"
          >
            <el-option v-for="(item,index) in questionType" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="难度">
          <el-select
            v-model="formInline.regionz"
            placeholder="请选择"
            style="width: 335px"
          >
            <el-option v-for="(item,index) in difficulty" :key="index" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="方向">
          <el-select
            v-model="formInline.regionc"
            placeholder="请选择"
            style="width: 335px"
          >
            <el-option v-for="(item,index) in direction" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="录入人">
          <el-select
            v-model="formInline.regionl"
            placeholder="请选择"
            style="width: 335px"
            @change="removeBtn"
          >
            <el-option v-for="item in lulist" :key="item.id" :label="item.username" :value="item.id" ></el-option>
          </el-select>
        </el-form-item>
        <!-- 第三排 -->
        <el-form-item label="题目备注">
          <el-input
            v-model="formInline.usera"
            placeholder="请选择"
            style="width: 335px"
          ></el-input>
        </el-form-item>
        <el-form-item label="企业简称">
          <el-input
            v-model="formInline.users"
            placeholder="请选择"
            style="width: 335px"
          ></el-input>
        </el-form-item>
        <el-form-item label="城市">
          <el-select
            v-model="formInline.regionw"
            placeholder="请选择"
            style="width: 160px"
            @change="removeBtn"
          >
            <el-option v-for="(item,index) in provinces" :key="index" :label="item" :value="item" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select
            v-model="formInline.regiong"
            placeholder="请选择"
            style="width: 160px"
          >
            <el-option v-for="(item,index) in area" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </el-form-item>
        <!-- 按钮 -->
        <el-form-item style="float: right">
          <el-button @click="eliminateBtn">清除</el-button>
          <el-button type="primary" @click="searchBtn">搜索</el-button>
        </el-form-item>
      </el-form>

      <!-- 表格部分 -->
        <questionsstyle :sousuo='sousuo' @yema='yema' :questionList='questionList'/>
      <!-- 分页 -->
        <div class="pagination" style="right">
          <PageTool
            :paginationPage="requestParameters.page"
            :paginationPagesize="requestParameters.pagesize"
            :total="a"
            :newpage="newpage"
            @pageChange="handleCurrentChange"
            @pageSizeChange="handleSizeChange"
            @pageChanges="pageChangeFn"
          ></PageTool>
        </div>
    </el-card>
  </div>
</template>

<script>
import { list as listt } from '@/api/hmmm/questions'
import { list } from '@/api/base/users'
import { simple } from '@/api/hmmm/subjects'
import { provinces, citys } from '@/api/hmmm/citys.js'
import PageTool from '@/module-manage/components/page-tool'
import questionsstyle from '@/module-hmmm/management/questionsstyle'
import { difficulty, questionType, direction } from '@/api/hmmm/constants'
import { simple as simples } from '@/api/hmmm/tags'
import { simple as simpled } from '@/api/hmmm/directorys'
export default {
  data () {
    return {
      currentPage1: 1,
      // 上面为页码假数据
      subjectID: '',
      formInline: {
        user: '',
        region: '',
        regiong: '',
        regionw: '',
        regionz: '',
        regionx: '',
        regionc: '',
        regionv: '',
        regionb: '',
        regionl: '',
        usern: '',
        userm: '',
        usera: '',
        users: ''

      },
      a: null,
      newpage: 1,
      sousuo: [],
      simpled: [],
      simples: [],
      simple: [],
      provinces: provinces(),
      citys: citys(),
      area: [],
      requestParameters: { page: 1, pagesize: 5 },
      total: '',
      lulist: [],
      difficulty: difficulty, // 难度
      questionType: questionType, // 题型
      direction: direction, // 方向
      questionList: [] // 点击分页当前页数获取前到的数据

    }
  },
  mounted () {
    this.gitlist() // 学科列表
    this.listBtn()
    this.mulumode()
    this.lururen()
  },
  methods: {

    removeBtn (city) {
      const res = citys(city)
      console.log(res)
      this.area = res
    },
    // 获取学科简单列表
    async gitlist () {
      const res = await simple()
      console.log('学科列表数据', res)
      this.simple = res.data
    },
    // 点击页数改变数据
    async pageChangeFn (page) {
      console.log(page)
      this.requestParameters.page = page
      console.log(this.requestParameters)
      // this.getbaseList()
      const res = await listt({ page: page, pagesize: this.requestParameters.pagesize })
      // console.log(res)
      this.questionList = res.data.items
    },
    // 每页显示信息条数
    async handleSizeChange (val) {
      this.requestParameters.pagesize = val
      // this.getbaseList()
      const res = await listt({ page: this.requestParameters.page, pagesize: val })
      // console.log(res)
      this.questionList = res.data.items
    },
    // 进入某一页
    async handleCurrentChange (val) {
      this.requestParameters.page = val
      const res = await listt({ page: val, pagesize: this.requestParameters.pagesize })
      // console.log(res)
      this.questionList = res.data.items
    },
    onSubmit () {
      console.log('submit!')
    },
    // 标签简单列表
    async listBtn () {
      const res = await simples()
      console.log('标签简单目录', res)
      this.simples = res.data
    },
    // 目录简单列表
    async mulumode () {
      const res = await simpled()
      console.log('目录简单列表', res)
      this.simpled = res.data
    },
    async eliminateBtn () { // 清除按钮
      // a
      this.subjectID = null
      this.formInline = {
        user: null,
        region: null,
        regiong: null,
        regionw: null,
        regionz: null,
        regionx: null,
        regionc: null,
        regionv: null,
        regionb: null,
        regionl: null,
        usern: null,
        userm: null,
        usera: null,
        users: null

      }
      const res = await listt()
      this.sousuo = res.data.items
    },
    async lururen () {
      const res = await list()
      console.log('录入人接口', res)
      this.lulist = res.data.list
    },
    // 搜索按钮
    async searchBtn () {
      const res = await listt({ subjectID: this.subjectID })
      console.log(res)
      this.sousuo = res.data.items
    },

    yema (a) {
      console.log(a)
      this.a = a
    }
  },
  components: {
    questionsstyle,
    PageTool
  }
}
</script>

<style scoped >
.explain {
  color: pink;
  font-size: 12px;
}
</style>
